<template>
<div class="table-responsive my-table fixed-height">
  <table class="table table-hover">
    <thead v-if="cfg.showHead">
      <tr>
        <th v-if="cfg.checkable" class="my-table-cb-td">
          <input type="checkbox" v-model="allChecked" />
        </th>
        <th v-for="column in cfg.columns" :style="{width: column.width}" class="my-table-th">{{column.name}}</th>
        <th v-if="isShowOperation" :style="{width: cfg.operation.width}" class="my-table-th">{{cfg.operation.name}}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-show="isShowLoading">
        <td colspan="{{lengthOfColumns}}" class="my-table-empty">
          <i class="fa fa-spinner fa-pulse fa-3x"></i>
        </td>
      </tr>
      <tr v-show="lengthOfList" v-for="item in list" class="my-table-tr">
        <td v-if="cfg.checkable" class="my-table-cb-td">
          <input type="checkbox" :checked="item._checked" @change.prevent="checkItem(item)" :disabled="isCheckDisabled(item)" />
        </td>
        <td v-for="column in cfg.columns" class="my-table-td multi-line">
          {{{showItem(item, column)}}}
        </td>
        <td v-if="isShowOperation" class="my-table-td">
          <div class="btn-group btn-group-sm" role="group">
            <a class="btn btn-default" href="javascript:;" v-for="action in cfg.operation.actions" @click.prevent="action.doClick(item)" v-show="isShow(action, item)">
              <span class="{{action.icon}}">{{action.name}}</span>
            </a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>        
</div>
</template>

<script>
import _ from 'lodash'

export default {
  props: {
    cfg: {
      type: Object,
      required: true
    },
    list: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    setChecked: {
      type: Function
    }
  },
  computed: {
    isShowLoading () {
      return this.loading && this.list.length === 0
    },
    isShowOperation () {
      return typeof this.cfg.operation != 'undefined'
    },
    lengthOfColumns () {
      return this.isShowOperation ? this.cfg.columns.length + 1 : this.cfg.columns.length
    },
    lengthOfList () {
      return _.size(this.list)
    },
    allChecked: {
      get () {
        let unchecked = _.find(this.list, {_checked: false})
        if (unchecked) {
          return false
        } else {
          return true
        }
      },
      set (val) {
        this.checkAll(val)
      }
    }
  },
  methods: {
    isCheckDisabled (item) {
      return item._disableCheck
    },
    showItem (item, column) {
      let val = item[column.field]
      if (column.show) {
        return column.show(item)
      } else {
        return val
      }
    },
    isShow (action, item) {
      if (action.isShow) {
        return action.isShow(item)
      } else {
        return true
      }
    },
    checkAll (val) {
      _.forEach(this.list, function(item) {
        if (!item._disableCheck) {
          if (this.setChecked) {
            this.setChecked(item._id, val)
          } else {
            item._checked = val
          }          
        }
      }.bind(this))
    },
    checkItem (item) {
      if (!item._disableCheck) {
        let val = !item._checked
        if (this.setChecked) {
          this.setChecked(item._id, val)
        } else {
          item._checked = val
        }        
      }
    }
  }
}
</script>

<style scoped>
.my-table {  
}
.my-table-th {
  position: relative;
  text-align: left;
}
.my-table-tr {
  height: 47px;
}
.my-table-td {
  text-align: left;
}
.my-table-empty {
  text-align: center;
}
.my-table-cb-td {
  width: 50px;
  text-align: left;
}
</style>